<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>账单</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style type="text/css">
    .layui-table-cell {
        height: auto;
    }
</style>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-warm layui-btn-xs" perm-show="bill:edit" lay-event="edit">结账</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" perm-show="bill:delete" lay-event="delete">取消订单</a>
</script>

<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'table', 'tableX', 'notice', 'xnUtil', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var tableX = layui.tableX;
        var admin = layui.admin;
        var form = layui.form;
        var notice = layui.notice;
        var xnUtil = layui.xnUtil;
        var laydate = layui.laydate;

        // 渲染字典下拉
        xnUtil.rendDictDropDown(null, 'isPay', 'pay_status', '请选择是否结账', null);



        /* 渲染表格 */
        var insTb = tableX.render({
            elem: '#dataTable',
            url: getProjectUrl() + 'bill/page',
            where:{hallname:getRequest(),isPay:0},
            page: true,
            cellMinWidth: 100,
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'id', hide:true},
                    {field: 'name', title: '消费项目', templet: function (d) { return getOrderItemInfo(d.name); } },
                    {field: 'sum', title: '总额'},
                    {field: 'hallname', title: '消费包厢'},
                    {field: 'isPay', title: '是否结账', templet: function (d) {  return xnUtil.rendDataTableDict(d.isPay, 'pay_status'); }},
                    {title: '操作', toolbar: '#tableBar', align: 'center', width: 200, minWidth: 200}
                ]
            ],
            done: function(res, curr, count) {
                xnUtil.tableDone(insTb, res, curr, count);
            }
        });

        /* 表格搜索 */
        form.on('submit(tableSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });

        /* 表格工具条点击事件 */
        table.on('tool(dataTable)', function (obj) {
            /* 删除 */
            if (obj.event === 'delete') {
                layer.confirm('确定要操作该数据吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function () {
                    admin.req(getProjectUrl() + 'bill/delete', JSON.stringify([{'id': obj.data.id}]), function(res){
                        layer.msg(res.message, {icon: 1, time: 1000}, function () {
                            insTb.reload();
                        });
                    }, 'post');
                });
            }
            /* 编辑 */
            if (obj.event === 'edit') {
                var id=getRequestID();
                var name=getRequest();
                //
                window.open("/pay/confirm?sum="+obj.data.sum+"&name="+name+"&id="+id);
                // showAddOrUpdateModel(obj.data);
                setStatus(id);
                var data=getOrderId(); //获取到账单的id值
                setStatus1(data);
            }
            function setStatus1(id){
                $.ajax({
                    url : getProjectUrl() +"bill/setStatus/"+id,//后台请求的数据
                    dataType: 'json', //数据格式
                    type : "get",//请求方式
                    async : true,//是否异步请求
                    success : function() {

                    },
                    error : function (arg1) {
                        console.log(arg1);
                    }
                })
            }
            function setStatus(id){
                $.ajax({
                    url : getProjectUrl() +"hallRoomJoint/setStatus/"+id,//后台请求的数据
                    dataType: 'json', //数据格式
                    type : "get",//请求方式
                    async : true,//是否异步请求
                    success : function() {

                    },
                    error : function (arg1) {
                        console.log(arg1);
                    }
                })
            }
        });


        // 显示表单弹窗
        function showAddOrUpdateModel(data) {
            var layIndex = admin.open({
                title: (data ? '修改' : '添加') + '账单',
                url: getProjectUrl() + 'bill/form',
                area: ['800px',''],
                data: { data: data },     // 传递数据到表单页面
                end: function () {
                    var layerData = admin.getLayerData(layIndex, 'formOk');
                    if (layerData) {  // 判断表单操作成功标识
                        layer.msg('结账成功！'+'</br>将在3秒后返回点餐页面');
                        setTimeout("window.location.href='/hallRoomJoint/order'", 3000 );
                        insTb.reload();  // 成功刷新表格
                    }
                },
                success: function (layero, dIndex) {
                    // 弹窗超出范围不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    $(layero).find('[lay-submit]').focus();
                }
            });
        }
    });
    function getOrderId() {
        var jsonObj = [];
        var $ = layui.$;
        var billid=" ";
        $("[lay-id='dataTable'] tbody tr").each(function (i) {
            var jsonStr = "{";// json格式开始
            $(this).children('td').each(function (j) {  // 遍历 tr 的各个 td
                jsonStr += '"' + $(this).data('field') + '":' + '"' + $(this).text() + '",';
            });
            jsonStr = jsonStr.replace(/,{1}$/gi, '');// 删除最后的逗号
            jsonStr += "}";// //json格式结束
            jsonObj.push(jsonStr);
        })
        layui.each(jsonObj, function (index, item) {
            var s1 = item.substring(item.indexOf("d") + 4)
            billid = s1.substring(0, s1.indexOf("\""))
        });
        return billid;

    }
    function getRequest(){
        var url = location.search; //获取url中"?"符后的字串
        if (url.indexOf("?") != -1) { //如果？没被删掉
            var str = url.substr(1); //str去掉了？
            strs = str.split("&"); //去掉&
            var a=decodeURIComponent(strs);
            var c = a.substring(5);
            var name=c.substring(0,c.indexOf(","));
        }
        return name;//name

    }

    function getRequestID(){
        var url = location.search; //获取url中"?"符后的字串
        if (url.indexOf("?") != -1) { //如果？没被删掉
            var str = url.substr(1); //str去掉了？
            strs = str.split("&"); //去掉&
            var a=decodeURIComponent(strs);
            var c = a.substring(5);
            var id=c.substring(c.indexOf(",")+4);
        }
        return id;//回传id

    }




    function getOrderItemInfo(objArry) {
        var strHtml = "<div>";
        // $.each(objArry, function (i, ele) {
        //     strHtml += ele.name + "&nbsp; x" + ele.quantity + "<br/>";
        // })

        var alength=objArry.match(/[,，]/g).length;
        for (i = 1; i <= alength; i++) {
            objArry=objArry.substring(objArry.indexOf(".")+1);
            // var num = objArry.substring(objArry.indexOf(i)+2);
            var c =objArry.substring(0,objArry.indexOf(","));
            strHtml +=i+"."+ c + "<br/>";
        }
        strHtml += "</div>";
        return strHtml;
    }
</script>
</body>
</html>
